<!doctype html>
<html>
<head>
<meta charset="utf-8">
	   
<title>我的个人简历</title>
<style>
img{width:100%;}
body{background:url(img/background.png);background-repeat:repeat;}
     .rightbox{width:65%;height:850px;background:#dabd9e;margin-left: 2.5%;margin-top: 1%;float:left;border: 2px solid #DADADA;border-radius:0.5%;}
.leftbox{width:30%;height: 850px; background:#dabd9e;margin-left: 1%;margin-top: 1%;float: left;border: 2px solid #DADADA;border-radius:1%;}
.hand{width:40%;margin: 0 auto;padding-top: 5%;}
.fontleft{font-size: 1rem;font-weight: 700;margin:0 auto;margin-top: 5%;width:15%;}   
.fontleft2{font-size: 1rem;font-weight: 700;margin:0 auto;margin-top: 5%;width:29%;} 
.leftsvg{margin-left: 1%;display: inline-block;}
.fontleft3{display: inline-block;font-weight: 700;}
.fontleft3{display: inline-block;font-weight: 700;}
.box1{margin-top:8%;margin-left: 4%;}
.box10{margin-top:3%;margin-left: 4%;}
.box2{margin-top: 1%;}
.box3{margin-top:3%;}
.rightsvg{margin-left:1%;display: inline-block;}
.fontright{display: inline-block;font-weight:700;}
.xianzhi1{}
.xianzhi2{}
.xianzhi3{}
.box4{width:25%;height:20px;background:white;display: inline-block;animation:html 2s infinite;}
.box5{width:25%;height:20px;background:white;display: inline-block;animation:English 4s infinite;}
.box6{width:25%;height:20px;background:white;display: inline-block;animation:ps 3s infinite;}

li{display: inline-block;}
ul{display: inline-block;}
p{padding-left: 5%;}
		
@keyframes html{
0%{background:#45BBB6;width: 7%;}
	
100%{background:#45BBB6;width:10%}
		}
		
@keyframes English{
0%{background:#45BBB6;width: 30%;}

100%{background:#45BBB6;width:45%}
		}
		
@keyframes ps{
	0%{background:#45BBB6;width: 22%;}
	
	100%{background:#45BBB6;width:30%}
		}
		
@media screen and (max-width:1130px){
.fontleft{font-size: 14px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 15%;}  
.fontleft2{font-size: 14px;font-weight: 700;margin:0 auto;margin-top: 5%;width:35%;}  
.fontleft3{font-size: 14px;font-weight: 700;margin:0 auto;margin-top: 5%;}
li{font-size: 14px;}
	p{font-size: 14px;}
@media screen and (max-width:960px){
.fontleft{font-size: 13px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 20%;}  
	.fontleft2{font-size: 13px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 40%;} 
	.fontleft3{font-size: 13px;font-weight: 700;margin:0 auto;margin-top: 5%;}
	li{font-size: 11px;}
p{font-size: 11px;}
@media screen and (max-width:690px){
.fontleft{font-size: 12px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 25%;} 
.fontleft2{font-size: 12px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 45%;} 
.fontleft3{font-size: 12px;font-weight: 700;margin:0 auto;margin-top: 5%;}
li{font-size: 10px;}
p{font-size: 10px;}
@media screen and (max-width:650px){
.leftbox{width:93%;height: 740px; background:#DADADA;margin-left: 3%;margin-top: 1%;float: left;border: 2px solid #DADADA;border-radius:1%;}
.fontleft{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 15%;} 
	.fontleft2{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 25%;} 
.fontleft3{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;}
li{font-size: 16px;}
	p{font-size: 16px;}

.rightbox{width:93%;height:700px;background:#DADADA;margin-left: 2.5%;margin-top: 2%;float:left;border: 2px solid #DADADAe;border-radius:0.5%;}
@media screen and (max-width:620px){
.leftbox{width:93%;height: 720px; background:#DADADA;margin-left: 3%;margin-top: 1%;float: left;border: 2px solid #DADADA;border-radius:1%;}
@media screen and (max-width:500px){
.leftbox{width:93%;height: 630px; background:#DADADA;margin-left: 3%;margin-top: 1%;float: left;border: 2px solid #DADADA;border-radius:1%;}
	@media screen and (max-width:420px){
	.fontleft{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 20%;} 
  .fontleft2{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;width: 38%;} 
	.fontleft3{font-size: 16px;font-weight: 700;margin:0 auto;margin-top: 5%;}
	li{font-size: 16px;}
	p{font-size: 16px;}

		}				
</style>
</head>
<body>
	<div class="leftbox">
 <div class="hand"><img src="img/2.jpg" alt="hand"></div>
	<div class="fontleft">胡鹏程</div>
<div  class="fontleft2">在校大学生/从化</div>
<div class="box1">
<div class="leftsvg"><img src="img/jbxx.svg" alt="jbxx"  ></div>
<div class="fontleft3">基本信息:</div></div>
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#262222 SIZE=2>
 <ul>
            <li>
     <label>个人信息</label>
                        <span>胡鹏程 / 男 </span>
     </li>
    <li>
    <label>学校</label>
      <span>中山大学南方学院</span>
       </li>
    <li>
       <label>专业</label>
        <span>数字媒体技术</span>
     </li>
      </ul>
	<div class="box1">
	<div class="leftsvg"><img src="img/lxfs.svg" alt="lxfs"  ></div>
	<div class="fontleft3">联系方式:</div></div>
	<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#262222 SIZE=2>	
	 <ul>
      <li>
    <label>手机</label>
    <span>13536341618</span>
     </li>
      <li>
      <label>邮箱</label>
      <span>1144125686@qq.com</span>
   </li>
     <li>
        <label>Github</label>
       <span>github.com/jacky0323</span>
   </li>
     </ul>
	<div class="box1">
	<div class="leftsvg"><img src="img/gxjn.svg" alt="jbxx"  ></div>
<div class="fontleft3">各项技能</div></div>
		<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#262222 SIZE=2>
<ul>
       <li>
   <label>摄影&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
   <progress value="70" max="100"></progress>
    </li>
   <li>
    <label>视屏剪辑</label>
       <progress value="75" max="100"></progress>
   </li>
     <li>
     <label>吉他&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
    <progress value="50" max="100"></progress>
   </li>
      <li>
    <label>logo设计</label>
     <progress value="60" max="100"></progress>
    </li>

   </ul>		
        
	</div>
	<div class="rightbox">
<div class="box3">
	<div class="box10">
		<div class="rightsvg"><img src= "img/jy.svg" alt="jy"></div>
	<div class="fontright">教育经历：</div>	</div>
				
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#262222 SIZE=1>
		
<div class="xianzhi4">
<p>东莞市谢岗小学   （小学）<font style="padding-left:20%">2006.9-2012.6</font></p>
 <p>惠州市惠台中学    （初中）<font style="padding-left: 20%">2012.9-2015.6</font></p>
 <p>惠州市华罗庚中学（高中）<font style="padding-left: 20%">2015.9-2018.6</font></p>
<p>中山大学南方学院（大学）<font style="padding-left: 20%">2018.9-今</font></p>
	<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#262222 SIZE=1>		  
	<div class="box10">
    <div class="leftsvg"><img src="img/jbxx.svg" alt="jbxx"  ></div>
    <div class="fontright">工作经历：</div>	
   </div>	
            
            
         </div>
     <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#262222 SIZE=1>
		
<div class="xianzhi4">
 
 <p>担任班长一职，并组织了学校的元旦晚会<font style="padding-left: 20%">2015.9-2018.6</font></p>
<p>加入了艺创系文娱部主持队，曾主持过第10届科技艺术节，举办了服装设计大赛<font style="padding-left: 20%">2018.9-2019.5</font></p>
					
		 <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#262222 SIZE=1>	
			
			<div class="box10">
    <div class="leftsvg"><img src="img/jbxx.svg" alt="jbxx"  ></div>
    <div class="fontright">个人成果：</div>	
   </div>	
            
						
		 <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#262222 SIZE=1>	
	<div class="xianzhi4">
 
 <p>获得团委学生会优秀干事称号<font style="padding-left: 20%">2018.12.18</font></p>
 <p>考取了普通话水平证书二甲水平成绩<font style="padding-left: 20%">2018.12.30</font></p>
 <p>获得团委学生会优秀干事称号<font style="padding-left: 20%">2018.12.18</font></p>
<p>在中山大学南方学院学生实践成果展示大赛中展示项目《摆渡人》获得三等奖<font style="padding-left: 20%">2019.1.13</font></p>
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#262222 SIZE=1>	
			
			<div class="box10">
    <div class="leftsvg"><img src="img/jbxx.svg" alt="jbxx"  ></div>
    <div class="fontright">自我评价：</div>	
   </div>	<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#262222 SIZE=1>	
            <p>喜欢运动健身但有点懒惰<font style="padding-left: 22%">❤</font></p>
 <p>幽默风趣但学习不优<font style="padding-left: 25%">❤</font></p>
<p>不想做普通人的普通人<font style="padding-left: 24%">❤</font></p>
		 <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="90%" color=#262222 SIZE=1>	
	<div class="xianzhi4">
			
			</div>
		
		
			
			</div>
            				

	
</body>
</html>

